/* eslint-disable react/no-children-prop */
/* eslint-disable react/no-array-index-key */
import { useContext } from 'react';

import { ReactComponent as ChevroneLeft } from '@/assets/images/profile/ChevroneLeft.svg';
import { restorePassword } from '@/entities/auth/model/actions';
import { getAuthEmail } from '@/entities/auth/model/selectors';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppDispatch, useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Modal } from '@/shared/ui';

import cs from './GetNewPassword.module.scss';

export const GetNewPassword = () => {
  const { closeModal, openModal } = useContext(ModalContext);
  const dispatch = useAppDispatch();
  const email = useAppSelector(getAuthEmail);
  const actualEmail = email;
  useMetaTag(true, '#999999');
  const handleGetNewPassword = () => {
    dispatch(restorePassword({ email: actualEmail })).then(() => {
      openModal(Modals.SuccessPassword);
    });
  };

  return (
    <Modal className={cs.modal} isMobile={false} isOpen onCloseClick={closeModal} zIndex={1100}>
      <span className={cs.back} onClick={() => openModal(Modals.ChangePassword)}>
        <ChevroneLeft />
      </span>
      <div className={cs.passes}>
        <h2 className={cs.title}>Получить пароль</h2>
        <p className={cs.block}>
          Отправим новый пароль <br />
          на {actualEmail}
        </p>
      </div>
      <div className={cs.button}>
        <Button children="Получить" disabled={false} onClick={handleGetNewPassword} variant={ButtonVariants.Primary} />
      </div>
    </Modal>
  );
};
